<template>
  <div class="conversation-history">
    <el-container>
      <el-header class="header-class" height="22">
        <div class="header-text">Conversation History</div>
      </el-header>
      <el-main class="container-main">
        <!--ascending descending-->
        <el-table :data="conversationHistoryData" style="width: 100%">
          <el-table-column label="From" prop="sender">
          </el-table-column>
          <el-table-column label="To" prop="receiver">
          </el-table-column>
          <el-table-column label="Message">
            <template slot-scope="scope">
              <span v-html="scope.row.description"></span>
            </template>
          </el-table-column>
          <el-table-column label="Created" prop="createdAt">
          </el-table-column>
          <el-table-column label="Attachement">
            <template slot-scope="scope">
              <el-button type="text" v-for="attach in scope.row.attachmentList" :key="attach.id"
                         @click="downloadAttachment(attach.id, attach.fileName)">{{attach.fileName}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import * as httpHelper from '@/common/js/httpHelper'
export default {
  props: {
    downloadUrl: {
      type: String
    },
    conversationHistoryData: {
      type: Array
    },
    functionList: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  methods: {
    async downloadAttachment(fileId, fileName) {
      let params = {
        'fileId': fileId
      }
      const result = await httpHelper.download(this.downloadUrl, params)
      let blob = new Blob([result.data])
      let elink = document.createElement('a')
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href)
      document.body.removeChild(elink)
    }
  }
}
</script>

<style scoped lang="scss">
  @import './../../../common/css/base.scss';

  .container-main {
    border: 1px solid $base-header-color;
  }

  .header-class {
    @include baseHeader(30px)
  }

  .header-text {
    color: #fff;
    margin-top: 5px;
    font-weight: bold;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .row {
    margin: 5px 0;
  }

  .label-text {
    text-align: center;
    vertical-align: middle;
  }
</style>
